import React, {useCallback, useMemo, useState} from 'react';
import DefaultCover from "../../../assets/image/defaultCover.png";
import {
    Artist,
    ArtistContainer, ArtistWrapper,
    CoverImg,
    CoverImgContainer,
    Info,
    InfoContainer,
    SongTitle,
    SongTitleContainer
} from "../style/MusicInfo.css";


function MusicInfo(props) {
    let [songTitleWidth,setSongTitleWidth] = useState(0)//歌曲名长度
    let [songTitleAroundWidth,setTitleAroundWidth] = useState(0)//歌曲名可视区长度
    let songTitleTitleRef = useCallback(node => {
        if (node !== null) {
            setSongTitleWidth(node.getBoundingClientRect().width);
            setTitleAroundWidth(node.parentElement.getBoundingClientRect().width);
        }
    }, [props.title]);

    //useCallback要配合React.memo一起使用才不会重复调用
    // let titleOverFlowContainer = useCallback(()=>{
    //     console.log(songTitleWidth,songTitleAroundWidth)
    //     return songTitleWidth>songTitleAroundWidth;
    // },[songTitleWidth,songTitleAroundWidth])

    let titleOverFlowContainer2 = useMemo(()=>{
        //console.log(songTitleWidth,songTitleAroundWidth)
        return songTitleWidth>songTitleAroundWidth;
    },[songTitleWidth,songTitleAroundWidth])

    return (
        <InfoContainer>
            <Info>
                <CoverImgContainer>
                    <CoverImg src={props.imgUrl || DefaultCover}
                              className={`${props.played? 'played':''}`}
                              style={{animationPlayState:props.playing?"running":"paused"}}/>
                </CoverImgContainer>
                <div className={"bfc_flex"}>
                    <SongTitleContainer>
                        <SongTitle width={songTitleWidth} parentWidth={songTitleAroundWidth}>
                            <p ref={songTitleTitleRef}
                               className={`songTitle ${props.played&&titleOverFlowContainer2?"scroll":""}`}>{props.title}</p>
                        </SongTitle>
                    </SongTitleContainer>
                    <ArtistContainer className={""}>
                        <ArtistWrapper>
                            {/*{*/}
                            {/*    props.artists.map((artist)=>*/}
                            {/*        <Artist c key={artist.name}>{artist.name}</Artist>*/}
                            {/*    )*/}
                            {/*}*/}
                            <Artist title={props.artists.map((artist)=>artist.name+" ")}>
                                {
                                    props.artists.map((artist)=>artist.name+" ")
                                }
                            </Artist>
                        </ArtistWrapper>
                    </ArtistContainer>
                </div>
            </Info>
        </InfoContainer>
    );

    // function titleOverFlowContainer(){
    //     console.log(songTitleWidth,songTitleAroundWidth)
    //     return songTitleWidth>songTitleAroundWidth;
    // }
}

MusicInfo.defaultProps={
    title:"霓天音乐",
    imgUrl: "",
    artists: [
        {
            name:"hw",
        },
        {
            name:"wc",
        },
        {
            name:"D31",
        }
    ],
    played:false,
    playing:false,
}



// export default React.memo(MusicInfo);//与useCallBack配合使用
export default MusicInfo;